<template>
    <div>
        <el-table
                :data="articles"
                stripe
                size="small"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="350">
            </el-table-column>
            <el-table-column
                    width="120"
                    prop="publishDate"
                    label="发布时间">
            </el-table-column>
            <el-table-column
                    width="120"
                    prop="editTime"
                    label="修改时间">
            </el-table-column>
            <el-table-column
                    width="100"
                    prop="pageView"
                    label="阅读数">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="400">
                <template slot-scope="scope">
                    <el-button size="small" round type="primary" @click="toEdit(1,scope.row.id)">编辑文章</el-button>
                    <el-button size="small" round type="primary" @click="toUnplished(scope.row.id,scope.row.title)">移入草稿箱文章</el-button>
                    <el-button size="small" round type="warning" @click="toDistbin(scope.row.id,scope.row.title)">移入垃圾箱</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :hide-on-single-page="true"
                style="margin-top: 10px"
                small
                :current-page="currentPage"
                @current-change="currentChange"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "list",
        data(){
            return{
                articles:[],
                currentPage : 1,
                pageSize : 8,
                total:1
            }
        },
        methods : {
            toEdit(state,id){
                this.$router.push({path:'/admin/editArticle',query: {from:state,id : id}});
            },
            toUnplished(id,title){
                this.$confirm('是否将【' + title + '】文章移入草稿箱?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.putRequest('/admin/article/?id=' + id + '&state=2').then(resp => {
                        if (resp) {
                            this.init();
                            this.$message.success("操作成功");
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            toDistbin(id,title) {
                this.$confirm('是否将【' + title + '】文章移入垃圾箱?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.putRequest('/admin/article/?id=' + id + '&state=0').then(resp => {
                        if (resp) {
                            this.init();
                            this.$message.success("操作成功");
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            currentChange(page){
                this.currentPage = page;
                this.init();
            },
          init(){
              this.getRequest('/admin/article/?state=1&page=' + this.currentPage + '&size=' + this.pageSize).then(resp => {
                  if(resp){
                      this.articles = resp.list;
                      this.total = resp.total;
                  }
              })
          }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style>

</style>